<template>
  <div class="wrap">
    <!-- 头部 -->
    <home-header />
    <!-- /头部 -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
      <van-grid column-num="3" clickable>
        <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :to="{
            path: '/itemLists',
            query: {
              cateId: cate.id
            }
          }"
          :text="cate.name"
        />
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 推荐商品 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我也是有底线的"
        :offset="50"
        @load="onLoad"
      >
        <items @clickItem="enterDetail" @addCart="addCart" :items="items" />
      </van-list>
    </van-pull-refresh>
    <!-- /推荐商品 -->
    <!-- tabbar -->
    <mtabbar />
  </div>
</template>

<script>
import Mtabbar from '_components/Mtabbar'
import HomeHeader from './components/HomeHeader.vue'
import { fetchCates, fetchBanner, fetchItems, addCart, fetchCartInfo } from '_api'
import Items from './components/Items'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
  name: 'home',
  data () {
    return {
      cates: [],
      banners: [],
      // 首页推荐商品数据
      items: [],
      // 首页楼层分页数据
      page: 1,
      pageSize: 5,
      // 上拉是否处于加载状态 触底事件触发时自动变成true
      loading: false,
      // 上拉是否到达最后一页 true代表到达最后一页，且onLoad不会再触发了
      finished: false,
      // 是否处理下拉刷新状态 用户下拉时，触发refresh同时isLoading变成true
      isLoading: false
    }
  },
  created () {
    this.fetchBanner()
    this.fetchCates()
    this.fetchCartInfo()
  },
  methods: {
    fetchCartInfo () {
      // 首页请求购物车数据
      fetchCartInfo({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          // 触发mutation 将 仓库中 items赋值
          this.$store.commit('cart/set_items', res.data.data.items)
        }
      })
    },
    addCart (id) {
      /*
        加入购物车
      */
      //  加入购物车
      addCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.$store.commit('cart/set_items', res.data.data.items)
          Toast.success('加入购物车成功，请前往购买')
        }
      })
    },
    enterDetail (id) {
      // 点击商品进入详情页
      this.$router.push(`/detail/${id}`)
    },
    onRefresh () {
      // 下拉刷新
      /*
       1 将items清空 重新请求第一页数据
       2 将page字段变成1
       3 上拉加载的 finished最后一页重新变成false
      */
      this.page = 1
      this.finished = false
      this.items = []
      /*
        将数据清空后，商品列表没有数据，就没有宽度，
        内容 底部 和 可视区底部 距离应该是负数，小于 给定50
      */
      this.fetchItems()
      this.page++
    },
    onLoad () {
      console.log('load')
      // 上拉是否触底
      /*
      事件触发 loading自动变成true
      底部文本 一直显示 加载中
      */
      this.fetchItems()
      // 上拉触底 要加载下一页数据
      this.page++
    },
    fetchBanner () {
      // 获取首页的banner
      fetchBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchCates () {
      // 请求宫格导航的商品分类
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    fetchItems () {
      // 获取首页的推荐商品
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.data.code === 700) {
          // 暂无数据 到达最后一页
          this.finished = true
        }
        //  请求完成时，将加载中（请求数据）状态变成false
        this.loading = false
        // 下拉刷新完成 将下拉状态变成false
        this.isLoading = false
        if (res.data.code === 0) {
          this.items = [...this.items, ...res.data.data.result]
        }
      })
    }
  },
  components: {
    Mtabbar,
    HomeHeader,
    Items
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-bottom: 50px;
}
.my-swipe {
  img {
    width: 100%;
  }
}
</style>
